$f-pagelayout-width-breakpoints: (
  lg: 80%,
  xl: 80%,
  el: 60%
);

@mixin f-make-pagelayout-max-widths($f-max-widths: $f-pagelayout-width-breakpoints, $f-breakpoints: $f-grid-breakpoints) {

  @each $f-breakpoint,
  $f-container-max-width in $f-max-widths {
    @include f-media-breakpoint-up($f-breakpoint, $f-breakpoints) {
      width: $f-container-max-width;
    }
  }
}

.f-page-is-midcard {
  overflow-y: auto;
  display: block;

  &::-webkit-scrollbar-track {
    background-color: $f-tmpl-bg;
  }
}

.f-page-layout {
  background: $f-pt-bg;
  box-shadow: $f-pt-layout-box-shaow;
  border-radius: $f-pt-border-radius;
  margin: $f-pt-outer-gutter;

  .f-page-header {
    box-shadow: none;

    .f-page-header-base {
      padding-top: 1rem;
      padding-bottom: 1rem;
    }
  }
}

.f-page-container {
  @include f-make-pagelayout-max-widths();
  margin: 0 auto;
}

.f-btn-wrapper {
  padding-top: 18px;
  padding-bottom: 16px;
  text-align: center;
}

.f-btn-wrapper .btn-lg {
  margin: 0 6px;
}

.f-tmpl-staticinfo-top {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.45);
  padding: 0 0 40px;
}

.f-tmpl-staticinfo-wrapper {
  background: rgba(42, 135, 255, 0.05);
  border: 1px solid rgba(42, 135, 255, 0.20);
  border-radius: 3px;
  padding: 14px 20px 6px;
  margin: 0 0 6px;

  .staticinfo--header {
    display: flex;
    align-items: center;

    .f-title {
      display: flex;
      align-items: center;

      .f-title-icon {
        margin: 0 0 0 12px;
        border: 1px solid #80B8FF;
        background: #D8E9FF;
        color: #4796FF;
        text-align: center;
        border-radius: 2px;

        &:before {
          font-size: 12px;
          line-height: 14px;
          display: block;
        }

        &.f-icon-woman {
          color: #FF7E7E;
          border-color: #FCABAB;
          background: #FFE9E9;
        }
      }

      .f-title-text {
        font-size: 17px;
        color: #2D2F33;
        line-height: 30px;
        margin: 0;
      }
    }
  }

  .staticinfo--content {
    padding: 12px 0 0;
  }

  .staticinfo--list {
    display: flex;
    margin: 0 -14px 0 0;
    flex-wrap: wrap;

    .staticinfo--list-item {
      position: relative;
      padding: 0 14px 0 0;
      margin: 0 14px 8px 0;
      color: #36434D;
      font-size: 14px;
      display: flex;
      align-items: center;

      &:last-child {
        &::after {
          display: none;
        }
      }

      .f-icon {
        color: #878D99;
        font-size: 13px;
        margin: 0 4px 0 0;
      }

      .f-title {
        margin: 0 4px 0 0;
      }

      &::after {
        content: '';
        height: 10px;
        width: 1px;
        background: #E4E7EF;
        top: 50%;
        margin-top: -5px;
        right: 0;
        position: absolute;
      }
    }
  }
}